<template>
  <div id="app">
    <div v-if="!fileParsed" class="upload-area" @dragover.prevent @drop="handleDrop">
      <el-upload
        class="upload-demo"
        drag
        action=""
        :auto-upload="false"
        :on-change="handleFileChange"
        :show-file-list="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件</div>
      </el-upload>
    </div>
    
    <div v-else class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="1000"
        :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column
          v-for="(header, index) in headers"
          :key="index"
          :prop="header"
          :label="header"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  name: 'App',
  data() {
    return {
      fileParsed: false,
      headers: [],
      tableData: [],
      scrollInterval: null,
      scrollStep: 3
    }
  },
  methods: {
    handleDrop(e) {
      e.preventDefault();
      const files = e.dataTransfer.files;
      if (files.length) {
        this.parseExcel(files[0]);
      }
    },
    handleFileChange(file) {
      this.parseExcel(file.raw);
    },
    parseExcel(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
        
        if (jsonData.length > 0) {
          this.headers = jsonData[0];
          this.tableData = jsonData.slice(1).map(row => {
            return this.headers.reduce((obj, header, i) => {
              obj[header] = row[i];
              return obj;
            }, {});
          });
          
          this.fileParsed = true;
          this.startAutoScroll();
        }
      };
      reader.readAsArrayBuffer(file);
    },
    startAutoScroll() {
      const tableWrapper = document.querySelector('.el-table__body-wrapper');
      if (tableWrapper) {
        let scrollTop = 0;
        const that = this;
        this.scrollInterval = setInterval(() => {
          scrollTop += that.scrollStep;
          if (scrollTop >= tableWrapper.scrollHeight - tableWrapper.clientHeight) {
            scrollTop = 0;
          }
          tableWrapper.scrollTop = scrollTop;
        }, 50);
      }
    }
  },
  beforeDestroy() {
    if (this.scrollInterval) {
      clearInterval(this.scrollInterval);
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.upload-area {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
}

.table-container {
  width: 90%;
  margin: 0 auto;
}
</style>
